<template>
  <el-aside width="200px">
    <div class="logo">
      <img
        src="http://qnadmin.9yuecloud.com/assets/eye-logo-04jUtJVT.png"
        alt=""
      />
      <h2>青牛前端</h2>
    </div>
    <el-menu
      background-color="raba(255, 255, 255, 0.1)"
      class="el-menu-vertical-demo"
      default-active="/home"
      text-color="#fff"
      router
    >
      <el-menu-item index="/home">
        <el-icon><Aim /></el-icon>
        <span>面板</span>
      </el-menu-item>
      <el-sub-menu
        :index="item.link"
        v-for="(item, index) in menus"
        :key="item.link"
      >
        <template #title>
          <el-icon><ChromeFilled /></el-icon>
          <span>{{ item.menuname }}</span>
        </template>
        <el-menu-item-group
          v-for="(item2, index) in item.children"
          :key="item2.link"
        >
          <el-menu-item :index="item2.link">{{ item2.menuname }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { MenuList, type DataMenu } from "@/api";
import { Aim, ChromeFilled } from "@element-plus/icons-vue";

const menus = ref<DataMenu[]>([]);
const getmenu = async () => {
  const res = await MenuList();
  console.log("111", res);
  menus.value = res.data.data;
};
getmenu();
</script>

<style lang="scss" scoped>
.logo {
  display: flex;
  align-items: center;
  height: 60px;
  color: #fff;
  img {
    width: 40px;
    margin: 0 15px;
  }
}
.el-menu-item:hover {
  background-color: #434343;
}
.el-menu-item:focus {
  background-color: #409eff;
  color: #fff;
}
</style>
